<template>
    <div class="createQuestionModal">
        <Modal class="diy-modal" v-model="modalShow" scrollable title="创建考题" @on-ok="submit" @on-cancel="clear">
            <Form :label-width="110">
                <FormItem label="当前主题">
                    <p>{{node.title}}</p>
                </FormItem>
                <FormItem label="题干">
                    <Input type="textarea" :autosize="{minRows:3}" v-model="fm.title"></Input>
                </FormItem>
                <FormItem label="限时">
                    <Input class="w-100" :number="true" v-model="fm.limit_time"></Input>
                    <span class="ml-1 color-999">单位分钟，为0则不限时</span>
                </FormItem>
                <FormItem label="是否多选">
                    <i-switch v-model="fm.is_multi" :true-value="1" :false-value="0" size="large">
                        <span slot="open">是</span>
                        <span slot="close">否</span>
                    </i-switch>
                </FormItem>
                <FormItem label="答案选项">
                    <Input search enter-button="新增选项" @on-search="add_option_item" v-model="option_text" placeholder="请输入选项内容" />
                    <RadioGroup v-model="text" v-if="!fm.is_multi" vertical class="mt-1">
                        <Radio  v-for="(val,index) in options" :key="index" :label="index">{{chars[index]+'：'+val}}</Radio>
                    </RadioGroup>
                    <CheckboxGroup v-else v-model="testArr" vertical class="mt-1 text-wrap">
                        <Checkbox class="d-block"  v-for="(val,index) in options" :key="index" :label="index">{{chars[index]+'：'+val}}</Checkbox>
                    </CheckboxGroup>
                </FormItem>
                <FormItem label="答案分值" v-if="options.length">
                    <div class="d-flex">
                        <Select style="width:80px" placeholder='' v-model="index_text">
                            <Option v-for="(val,index) in options" :key="index" :value="chars[index]">{{chars[index]}}</Option>
                        </Select>
                        <Input style="width:180px" class="ml-1" :number="true" search enter-button="添加分值" v-model="score_text" @on-search="add_score_item"></Input>
                    </div>
                    <div class="d-flex mt-1">
                        <Tag color="blue"  type="border" closable @on-close="rm_scores(key)" class="mr-1 mb-1" v-for="(val,key) in scores" :key="key">{{key+'：'+val}}</Tag>
                    </div>
                    <p>未设置的选项默认为0分</p>
                </FormItem>
                <FormItem label="附件列表">
                    <upload-button @set_files="set_files" v-if="openQuestionsDialog"/>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>

<script>
import uploadButton from "./uploadButton"
import {deep_clone} from "@/common/tool"
export default {
    props:['openQuestionsDialog','node'],
    data(){
        return {
            testArr:[],
            text:'',
            chars:['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'],
            option_text:'',
            index_text:'',
            options:[],
            scores:{},
            score_text:0,
            modalShow:false,
            fm:{
                type:3,
                score:0,
                option:[],
                limit_time:0,
                title:'',
                files:'',
                node_id:'',
                is_multi:0,
            }
        }
    },
    methods:{
        rm_scores(key){
            this.$delete(this.scores,key) 
        },
        set_files(listStr){
            this.fm.files=listStr
        },
        clear(){
            this.$emit('close')
            this.fm={
                type:3,
                score:0,
                option:[],
                limit_time:0,
                title:'',
                files:'',
                node_id:'',
                is_multi:0,
            }
            this.scores={}
            this.options=[]
        },
        add_option_item(str){
            if(str && !this.options.includes(str)){
                this.options.push(str)
                this.option_text=''
            }
        },
        add_score_item(str){
            if(!this.index_text) return
            str=str || 0
            this.scores[this.index_text]=str
            this.score_text=''
            this.index_text=''
        },
        restart(str){
            this.modalShow=false
            this.$Modal.warning({
                title: '提交失败',
                content: str,
                onOk:()=>{
                    this.modalShow=true 
                }
            });
        },
        submit(){
            this.fm.node_id=this.node.id
            if(!this.options.length ){
                this.restart('请输入答案选项')
                return 
            }
            this.fm.option=this.options.map((el,index)=>({text:el,index:this.chars[index],score:this.scores[this.chars[index]] || 0}))
            for (const key in this.scores) {
                this.fm.score+=this.scores[key]
            }
            this.$emit('add',deep_clone(this.fm))
            this.clear()
        }
    },
    components:{
        uploadButton
    },
    watch:{
        openQuestionsDialog(){
            this.modalShow=this.openQuestionsDialog
        },
    },
   
}
</script>